<template>
  <el-checkbox-group v-model="checked" v-bind="$attrs" v-on="$listeners" @change="handleChange">
    <el-checkbox v-for="(item,i) in labels" :key="i" :label="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    name: "my-checkbox-group",
    /** 因el-checkbox-group的labels直接传Null会报错，所以重新写v-model **/
    model: {
      prop:'value',
      event:'changed'
    },
    props: {
      /** v-model默认为value,直接用就不改了 **/
      value:{
        type: Array,
        default: ()=>{
          return []
        }
      },
      /** 如果使用字典查询,传入字典名 **/
      dict: {
        type: String
      },
      /** 如果使用url查询,传入url **/
      url: {
        type: String
      },
      /** 如果不使用字典查询,可以在此参数直接传入option数组 **/
      options: {
        type: Array,
        default: ()=>{
          return []
        }
      }
    },
    data(){
      return{
        labels: [],
        checked: [],
      }
    },
    methods:{
      /** el-checkbox-group的onchange事件,$emit model.event的方法名,回传赋值v-model; **/
      handleChange(){
        this.$emit('changed',this.checked)
      }
    },
    created() {
      /*
      * 判断字典名称是否为空  为空使用options作为数据源， 不为空按字典名称查询数据作为数据源
      * **/
      if(this.dict != null){
        this.$ajax.getDict(this.dict).then(res=>{
          this.labels = res;
        });
      }else if(this.url != null){
        this.$ajax.requestCommonGet(this.url).then(res=>{
          this.labels = res;
        });
      }else{
        this.labels = this.value
      }
    }
  }
</script>

<style scoped>

</style>
